/**
*@author ymhui
*@createTime 05 15:31
*@description
*/
<template>
  <div id="device" :style="style"></div>
</template>

<script>
    const eCharts = require('echarts');
    import {mapActions, mapGetters} from 'vuex';

    export default {
        name: "Device",
        computed: {
            ...mapGetters([
                'deviceFaulty'
            ])
        },
        data() {
            return {
                loading: false,
                timeTask: null,
                style: "height:12em;"
            };
        },
        props: {
            isFullScreen: Boolean
        },
        methods: {
            ...mapActions([
                'initDeviceFaultyAct'
            ]),
            getOption() {
                return {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'horizontal',
                        // top: 'middle',
                        bottom: 5,
                        x: 'left',
                        data: ['正常', '故障'],
                        textStyle: {
                            color: '#ffffff'
                        }
                    },
                    series: [
                        {
                            name: '设备故障情况',
                            type: 'pie',
                            radius: [0, '50%'],
                            center: ['50%', '40%'],
                            selectedMode: 'single',
                            label: {
                                position: 'inside'
                            },
                            data: [
                                {
                                    value: this.deviceFaulty.normal,
                                    name: '正常',
                                    itemStyle: {
                                        normal: {
                                            color: '#03d0ff',
                                        }
                                    },
                                    emphasis: {
                                        itemStyle: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                },
                                {
                                    value: this.deviceFaulty.faulty,
                                    name: '故障',
                                    itemStyle: {
                                        normal: {
                                            color: '#a14a5d'
                                        },
                                    },
                                    emphasis: {
                                        itemStyle: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        },
                                    }

                                }
                            ]
                        }
                    ]
                };
            },
            initChart() {
                this.initDeviceFaultyAct().then(result => {
                    let myCharts = eCharts.init(document.getElementById('device'));
                    myCharts.setOption(this.getOption());
                }).catch(error => {
                    console.error(error);
                });
            },
            chartTimeTask() {
                this.timeTask = setInterval(() => {
                    console.log('执行工况报警刷新任务');
                    this.initChart();
                }, 1000 * 300)
            },
            wrapStyle() {
                if (this.isFullScreen) {
                    this.style = "height:14em;";
                } else {
                    this.style = "height:12em;";
                }
            }
        },
        watch: {
            isFullScreen(oldValue, newValue) {
                if (oldValue !== newValue) {
                    this.wrapStyle();
                }
            }
        },
        mounted() {
            this.initChart();
            this.chartTimeTask();
        },
        beforeDestroy() {
            clearInterval(this.timeTask);
        }
    }
</script>

<style scoped>

</style>
